<template>
    <div class="content_page" v-if="datalist.length">
        <div class="content_item" v-for="(i, k) in datalist" :key="k" @click="toDetail(i)">
            <div :class="['content_item_title', globalFont]">{{ i.helpTitle }}</div>
            <image src="/static/myInfo/icon_arrow.png"></image>
        </div>
    </div>
    <div v-else class="empty-box">
    <image src="/src/static/home/img_None.png"></image>
    <div class="title" :class="['title', globalFont]">暂无数据</div>
  </div>
</template>
<script lang="ts" setup>
import { ref,getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import type { helpCenetrType, resInfo } from "@/api/myInfo/type.ts";
import { helpsList } from '@/api/myInfo/myInfo.ts'
const datalist = ref<helpCenetrType>([])
const getDataList = () => {
    helpsList().then((res: resInfo) => {
        if (res.resultStatus) {
            datalist.value = res.resultData
        } else {
            uni.showToast({
                title: res.errorMessage,
                icon: "none"
            })
        }
    }).catch((err: any) => {
        uni.showToast({
            title: '服务器异常',
            icon: "none"
        })
    })
}
const toDetail = (e: any) => {
    uni.navigateTo({
        url: `/pages/toTab/helpCenter/helpcenterdetail?helpId=${e.helpId}`
    })
}
const instance = getCurrentInstance();
const appStorage = instance?.appContext.config.globalProperties.appStorage;
const globalFont = ref()
onLoad(() => {
    const userInfo_key = appStorage.getObj("userInfo_key");
	globalFont.value = userInfo_key.smallFont
    getDataList()
})
</script>
<style lang="scss" scoped>
:root {
  /* 默认字号 */
  --font-size-small: 26rpx;
  /* 中号字号 */
  --font-size-medium: 32rpx;
    /* 大号字号 */
  --font-size-large: 40rpx;
}

.small_font {
  font-size: var(--font-size-small);
}

.small-medium {
  font-size: var(--font-size-medium);
}

.small-large {
  font-size: var(--font-size-large);
}
.content_page {
    background-color: #f8f8f8;
    height: calc(100vh - 80rpx);

    .content_item {
        background-color: #fff;
        padding: 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        image {
            width: 20rpx;
            height: 20rpx;
        }
    }
}
.empty-box {
  height: calc(100vh - 150rpx);
  background: #f8f8f8;
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  image {
    width: 150rpx;
    height: 150rpx;
    margin-bottom: 40rpx;
  }

  .title {
    // font-size: 32rpx;
    color: #999999;
    font-weight: bold;
  }
}
</style>